/*手机产品概述部分逻辑代码
------------------------------------------------------*/

/*副导航滚动时固定
---------------------------------------------------------------------------*/
var oNavSecondWrapper = document.querySelector(".nav-second-wrapper");

myAddEvent(window, 'scroll', function () {
    if (getScrollOffset().y > 60) {
        oNavSecondWrapper.style.position = "fixed";
    } else {
        oNavSecondWrapper.style.position = "static";
    }
})

/*banner01
---------------------------------------------------------------------------*/
//选中图片
var oMovePic = document.querySelector(".move-pic");

myAddEvent(window, 'load', function () {
    oMovePic.style.transition = "all 2s ease-in";
    oMovePic.style.top = "48px";
    oMovePic.style.opacity = "1";
})

//选中 banner 区域h2标题
var oBanner01ContentH2 = document.querySelector(".banner01-content h2");

myAddEvent(window, 'load', function () {
    oBanner01ContentH2.style.transition = "all 1s ease-in";
    oBanner01ContentH2.style.marginTop = "0";
    oBanner01ContentH2.style.opacity = "1";
})

//选中 banner 区域h3标题
var oBanner01ContentH3 = document.querySelector(".banner01-content h3");

myAddEvent(window, 'load', function () {
    oBanner01ContentH3.style.transition = "all 1.4s ease-in";
    oBanner01ContentH3.style.marginTop = "0";
    oBanner01ContentH3.style.opacity = "1";
})

//选中 banner 区域 p1 段落
var oBanner01ContentP1 = document.querySelector(".banner01-content-p1");

myAddEvent(window, 'load', function () {
    oBanner01ContentP1.style.transition = "all 2s ease-in";
    oBanner01ContentP1.style.marginTop = "0";
    oBanner01ContentP1.style.opacity = "1";
})

//选中 banner 区域 p2 段落
var oBanner01ContentP2 = document.querySelector(".banner01-content-p2");

myAddEvent(window, 'load', function () {
    oBanner01ContentP2.style.transition = "all 2s ease-in";
    oBanner01ContentP2.style.marginTop = "10px";
    oBanner01ContentP2.style.opacity = "1";
})

/*banner02
--------------------------------------------------------------------------*/
var banner02DescContentSpan = document.querySelector(".banner02-desc-content span");
var banner02DescContentH2 = document.querySelector(".banner02-desc-content h2");
var banner02DescContentP = document.querySelector(".banner02-desc-content p");
var banner02DescPic = document.querySelector(".banner02-desc-pic");

myAddEvent(window, 'scroll', function () {
    // console.log(window.pageYOffset); //300
    if (getScrollOffset().y > 300) {

        banner02DescContentSpan.style.transition = "all 1s ease-in";
        banner02DescContentSpan.style.opacity = "1";
        banner02DescContentSpan.style.marginTop = "0";

        banner02DescContentH2.style.transition = "all 1s ease-in";
        banner02DescContentH2.style.opacity = "1";
        banner02DescContentH2.style.marginTop = "20px";

        banner02DescContentP.style.transition = "all 1s ease-in";
        banner02DescContentP.style.opacity = "1";
        banner02DescContentP.style.marginTop = "20px";

        banner02DescPic.style.transition = "all 1s ease-in";
        banner02DescPic.style.opacity = "1";
        banner02DescPic.style.top = "200px";
    }
})


var banner03HandleClickBtn = document.querySelector(".banner03-wrapper a");
banner03HandleClickBtn.onclick = function (params) {
    videoBg.style.display = 'block';
    videoContentVideo.currentTime = 0;
    videoContentVideo.play();
    videoContentVideo.muted = false;
}


/*视频弹出层
---------------------------------------------------------------*/
var videoBg = document.querySelector(".video-bg");
var videoHandleClickBtn = document.querySelector(".video-header span");
var videoContentVideo = document.querySelector(".video-content-video");
videoBg.onclick = videoHandleClickBtn.onclick = function (params) {

    if (videoContentVideo.paused) {
        videoContentVideo.play();
        videoBg.style.display = 'none';
    } else {
        videoContentVideo.pause();
        videoContentVideo.muted = true;
        videoBg.style.display = 'none';
    }
    
}

/*banner04
------------------------------------------------------------------------*/
var banner04DescContentSpan = document.querySelector(".banner04-desc-content span");
var banner04DescContentH2 = document.querySelector(".banner04-desc-content h2");
var banner04DescContentP = document.querySelector(".banner04-desc-content p");
var banner04DescPic = document.querySelector(".banner04-desc-pic");

myAddEvent(window, 'scroll', function () {
    // console.log(window.pageYOffset); //1500
    if (getScrollOffset().y > 1400) {

        banner04DescContentSpan.style.transition = "all 1s ease-in";
        banner04DescContentSpan.style.opacity = "1";
        banner04DescContentSpan.style.marginTop = "0";

        banner04DescContentH2.style.transition = "all 1s ease-in";
        banner04DescContentH2.style.opacity = "1";
        banner04DescContentH2.style.marginTop = "20px";

        banner04DescContentP.style.transition = "all 1s ease-in";
        banner04DescContentP.style.opacity = "1";
        banner04DescContentP.style.marginTop = "20px";

        banner04DescPic.style.transition = "all 1s ease-in";
        banner04DescPic.style.opacity = "1";
        banner04DescPic.style.top = "200px";
    }
})


/*banner05
----------------------------------------------------------------------------*/
var banner05DescContentSpan = document.querySelector(".banner05-desc-content span");
var banner05DescContentH2 = document.querySelector(".banner05-desc-content h2");
var banner05DescContentP = document.querySelector(".banner05-desc-content p");

myAddEvent(window, 'scroll', function () {
    // console.log(window.pageYOffset); //2200
    if (getScrollOffset().y > 2200) {

        banner05DescContentSpan.style.transition = "all 1s ease-in";
        banner05DescContentSpan.style.opacity = "1";
        banner05DescContentSpan.style.marginTop = "0";

        banner05DescContentH2.style.transition = "all 1s ease-in";
        banner05DescContentH2.style.opacity = "1";
        banner05DescContentH2.style.marginTop = "20px";

        banner05DescContentP.style.transition = "all 1s ease-in";
        banner05DescContentP.style.opacity = "1";
        banner05DescContentP.style.marginTop = "20px";
    }
})

/*banner07
-----------------------------------------------------------------------*/
var banner07DescContentSpan = document.querySelector(".banner07-desc-content span");
var banner07DescContentH2 = document.querySelector(".banner07-desc-content h2");
var banner07DescContentP = document.querySelector(".banner07-desc-content p");

myAddEvent(window, 'scroll', function () {
    // console.log(window.pageYOffset); //3900
    if (getScrollOffset().y > 3900) {

        banner07DescContentSpan.style.transition = "all 1s ease-in";
        banner07DescContentSpan.style.opacity = "1";
        banner07DescContentSpan.style.marginTop = "0";

        banner07DescContentH2.style.transition = "all 1s ease-in";
        banner07DescContentH2.style.opacity = "1";
        banner07DescContentH2.style.marginTop = "20px";

        banner07DescContentP.style.transition = "all 1s ease-in";
        banner07DescContentP.style.opacity = "1";
        banner07DescContentP.style.marginTop = "20px";
    }
})


/*banner09
--------------------------------------------------------------------------*/
var banner09ContentH2 = document.querySelector(".banner09-content h2");
var banner09ContentH3 = document.querySelector(".banner09-content h3");
var banner09ContentP = document.querySelector(".banner09-content p");

myAddEvent(window, 'scroll', function () {
    if (getScrollOffset().y > 5200) {
        banner09ContentH2.style.transition = "all 1s ease-in";
        banner09ContentH2.style.opacity = "1";
        banner09ContentH2.style.marginTop = "0";

        banner09ContentH3.style.transition = "all 1s ease-in";
        banner09ContentH3.style.opacity = "1";
        banner09ContentH3.style.marginTop = "0";

        banner09ContentP.style.transition = "all 1s ease-in";
        banner09ContentP.style.opacity = "1";
        banner09ContentP.style.marginTop = "0";
    }
})


/*banner10
--------------------------------------------------------------------------*/
var banner10DescContentSpan = document.querySelector(".banner10-desc-content span");
var banner10DescContentH2 = document.querySelector(".banner10-desc-content h2");
var banner10DescContentP = document.querySelector(".banner10-desc-content p");
var banner10DescPic = document.querySelector(".banner10-desc-pic");
var banner10Btn = document.querySelector(".banner10-btn");

myAddEvent(window, 'scroll', function () {
    // console.log(getScrollOffset().y); //5800
    if (getScrollOffset().y > 5800) {

        banner10DescContentSpan.style.transition = "all 1s ease-in";
        banner10DescContentSpan.style.opacity = "1";
        banner10DescContentSpan.style.marginTop = "0";

        banner10DescContentH2.style.transition = "all 1s ease-in";
        banner10DescContentH2.style.opacity = "1";
        banner10DescContentH2.style.marginTop = "20px";

        banner10DescContentP.style.transition = "all 1s ease-in";
        banner10DescContentP.style.opacity = "1";
        banner10DescContentP.style.marginTop = "20px";

        banner10DescPic.style.transition = "all 1s ease-in";
        banner10DescPic.style.opacity = "1";
        banner10DescPic.style.top = "180px";
    }

    if (getScrollOffset().y > 6020) {
        banner10Btn.style.opacity = "1";
        banner10Btn.style.bottom = "40px";
    }
})


/*banner11
--------------------------------------------------------------------------*/
var banner11ContentSpan = document.querySelector(".banner11-content span");
var banner11ContentH2 = document.querySelector(".banner11-content h2");
var banner11ContentP = document.querySelector(".banner11-content p");

myAddEvent(window, 'scroll', function () {
    // console.log(document.documentElement.scrollTop);    //6000
    if (getScrollOffset().y > 6000) {
        banner11ContentSpan.style.transition = "all 2s ease-in";
        banner11ContentSpan.style.marginTop = "0";
        banner11ContentSpan.style.opacity = "1";
        

        banner11ContentH2.style.transition = "all 2s ease-in";
        banner11ContentH2.style.opacity = "1";
        banner11ContentH2.style.marginTop = "0";

        banner11ContentP.style.transition = "all 2s ease-in";
        banner11ContentP.style.opacity = "1";
        banner11ContentP.style.marginTop = "0";
    }

})